<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出添加信息页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<style>
			* { touch-action: none; }
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*自定义样式*/
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			a{
				color: #ffffff;
			}
			.mui-content{
				width: 100%;
				height: 100%;
				background: #ffffff;
			}
			.mui-bar{
				background:#4F77AA ;
				color: #ffffff;
				-webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
    			box-shadow: 0 0 1px rgba(0,0,0,0);
			}
			.mui-title{
				color: #ffffff;
			}
			.content_item{
				width: 100%;
				height: 100%;
			}
			.content_item .mui-control-content{
				width: 100%;
				height: 100%;
			}
			
			.mui-segmented-control{
				width: 50%;
				margin-left: 25%;
				border: 1px solid #4F77AA;
				border-radius: 15px;
			}
			.mui-segmented-control .mui-control-item{
				line-height: 30px;
			}
			.mui-segmented-control .mui-control-item1{
				border-radius: 15px 0 0 15px;
			}
			
			.color-primary{
				background: #1ab394;
			}
			.color-success {
			    background: #08B107;
				}
			.color-info {
			    background: #23c6c8;
			}
			.color-warning {
			    background: #f8ac59;
			}
			.color-wait{
				background: #FB665F;
			}

			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-popover {
				left: 50px;
				width: 320px;
				height: 500px;
			}
			.mui-content {
				padding: 10px;
			}
			.mui-input-row label{
				width: 35%;
				font-size: 14px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				width: 65%;
				font-size: 14px;
			}
			.mui-input-group{
				background: rgba(255,255,255,0);
			}
			.mui-input-group input, .mui-input-group textarea{
				border:1px solid #dddddd;
			}
			.clear{
				clear: both;
			}
			.bottom_submit {
			    width: 100%;
			   text-align: center;
			   margin-top: 15px;
			}
			.mui-control-content.mui-active{
				height: calc(100% - 84px);
				margin-top: 24px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">popover（弹出菜单）</h1>
		</header>
		<div class="mui-content">
			<p style="text-indent: 0;">
				<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" href="#topPopover" style="color:#4f77a8;"></a>
			</p>
			 <div id="item1" class="mui-control-content mui-active">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view" id="item1_ul">
                       
                    </ul>
                </div>
            </div>
        </div>
			
		</div>
		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<form id="mainForm1" class="mui-input-group">
                            <div class="mui-input-row">
                                <label>报修标题：</label>
                                <input type="text" id="repairName1" placeholder="标题">
                            </div>
                            <div class="mui-input-row">
                                <label>报修分类：</label>
                                <input type="text" id="repairCategory1"  placeholder="类别1">
                            </div>
                            <div class="mui-input-row append">
                                <label>选择设备：</label>
                                <input type="text" id="deviceCode1" placeholder="设备1" >

                            </div>
                          
                            <div class="line_x" style=""></div>
                            <div class="" style="padding: 10px 15px;">
                                <label>故障描述：</label>
                                <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                            </div>
                            <div class="clear"></div>

                        </form>
			        <div class="bottom_submit">
			            <input type="button" value="添加" id="add">
			        </div>
				</div>
			</div>

		</div>
	
		<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init();
			
			mui.plusReady(function () {
			});
			mui('#scroll').scroll();
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});


			$(document).on("click","span.mui-pull-left",function(){
				window.location.href="../../index.html";
			})

			// 点击添加按钮
			$(document).on("click","input#add",function(){
				var data={};
				data.name=$("#repairName1").val();
				data.type=$("#repairCategory1").val();
				data.equipment=$("#deviceCode1").val();
				data.describe=$("#repairContent1").val();
				console.log(data)
				$("#topPopover").removeClass("mui-active");
				$("#topPopover").css("display","none");
				$(".mui-backdrop").remove();
				//$("#item1_ul").append('<li class="mui-table-view-cell mui-media">'
                         //    +='<div class="mui-media-body">'
                         //    +='  <p class="mui-ellipsis mui-ellipsis-title">'
                         //    +=''+data.name+'</p>'
                         //    +=' <p class="mui-ellipsis">报修分类：'+data.type+'</p>'
                         //    +='<p class="mui-ellipsis">设备：'+data.equipment+'</p>'
                         // +='<p class="mui-ellipsis">故障描述：'+data.describe+'</p>'
                         //    +='</div>'
                       // +='</li>')
				$("#item1_ul").append('<li class="mui-table-view-cell mui-media"><div class="mui-media-body"><p class="mui-ellipsis mui-ellipsis-title">报修名称'+data.name+'</p><p class="mui-ellipsis">报修分类：'+data.type+'</p><p class="mui-ellipsis">设备：'+data.equipment+'</p><p class="mui-ellipsis">故障描述：'+data.describe+'</p></div></li>')
				
			})
		</script>

	</body>

</html>